<template>
  <div>
    <div class="search-div">
      <el-form label-width="90px" size="small">
        <el-row>
          <el-col :span="22">
            <el-form-item label="输入搜索信息">
              <el-input v-model="keywordText" />
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="1">
            <el-button type="primary" size="small" @click="fetchData()">
              搜索
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="chart" style="width: 100%; height: 500px"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { GetOrderStatisticsData1,GetOrderStatisticsData2 } from "@/api/order/orderInfo.js";
import { ElMessage,ElMessageBox} from 'element-plus'
onMounted(async () => {
  fetchData();
});

const chart = ref();
const keywordText = ref("目前最畅销商品排行");
const fetchData = async () => {
  ElMessage.success("正在解析语义,请耐心等待...")
  let ajaxResult1 = await GetOrderStatisticsData1(keywordText.value);
  //['countKeyWord':'金额','groupKeyWord':'性别','dataKey':'xxxxxxxxxxxxx']
  let countKeyWord = ajaxResult1.data.countKeyWord;
  let groupKeyWord = ajaxResult1.data.groupKeyWord;
  let dataKey = ajaxResult1.data.dataKey;
  ElMessage.success("解析语义完成:以 【"+groupKeyWord+"】 进行分组,以 【"+countKeyWord+"】 进行统计...  再耐心等待一会儿...")
  let ajaxResult2 = await GetOrderStatisticsData2(dataKey);
  ElMessage.success("报表生成成功...")
  //解构AjaxResult的data属性： Map<String,Object>     ['xList':xList,'yList',yList]
  console.log(ajaxResult2.data);
  setChartOption(ajaxResult2.data.xList, ajaxResult2.data.yList);
};

const setChartOption = (xList, yList) => {
  const myChart = echarts.init(chart.value);
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: "订单动态统计",
    },
    tooltip: {},
    legend: {
      data: ["订单相关信息总量"],
    },
    xAxis: {
      data: xList,
    },
    yAxis: {},
    series: [
      {
        name: "订单总金额（元）",
        type: "bar",
        data: yList,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>